<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
        <style>
  .box1 { margin-bottom: 20px; }
  .box2 { margin-top: 30px; }

.parent { margin-top: 20px; }
  .child { margin-top: 30px; }

.empty-box {
    margin-top: 20px;
    margin-bottom: 30px;
    /* 无内容、无边框、无内边距 */
  }

  .boxA { margin-bottom: -20px; }
  /* 特殊负值 */
  .boxB { margin-top: 30px; }


  .parent {
  border-top: 1px solid transparent; /* 添加透明边框 */
  padding-top: 1px; /* 或添加极小内边距 */
}

.Parent {
  overflow: auto; /* 或 hidden / scroll */
  display: flow-root; /* 推荐方式 */
}

.parenT {
  display: flex; /* 或 grid */
}

.image {
    float: right;
    margin-left: 20px;
    width: 200px;
  }
</style>
</head>
<body>
    <div>当两个垂直相邻的块级元素的上下外边距接触时，它们会合并成一个外边距，这种现象称为外边距合并。合并后的外边距取两者中的
        较大值</div>
    <!-- 减小页面宽度,字体大小不会变,div装不下了,自动换行 -->


兄弟
<div class="box1">Box 1</div>
<div class="box2">Box 2</div>

父子
<div class="parent">
  <div class="child">Child</div>
</div>

<div class="empty-box"></div>
空元素自身上下外边距合并


<div class="boxA">Box A</div>
<div class="boxB">Box B</div>
直接加

防止外边距合并的方法
方法一：添加隔离层
方法二：创建 BFC
方法三：使用 Flex/Grid 布局
<!-- 其实... -->

<br>
文字环绕效果
<img src="D:\OneDrive\Desktop\sabasidian-heart.jpg" class="image" alt="啊">
<p>这是一段围绕浮动图片的文本。Lorem ipsum dolor sit amet, consectetur adipiscing elit...（更多文本）</p>
</body>
</html>